<template>
  <li>
    <div class="item">
      <input type="checkbox" v-model="checked">
      <div class="middle" @click.self="handle">
        <span class="title">{{ item.title }}</span>
        <span class="time">{{ item.created_at || new Date().toDateTime() }}</span>
      </div>
    </div>
    <button @click="del">删除</button>
  </li>
</template>

<script>
import { computed } from 'vue'
export default {
  name: 'Item',
  props: {
    item: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    checkItem: {
      type: Function,
      required: true
    },
    delItem: {
      type: Function,
      required: true
    },
  },
  setup(props) {

    // 点击 li 也可以选中
    const handle = () => {
      props.checkItem(props.item, !props.item.checked)
    }

    // 方式一：methods: @click="checked"
    // 方式二：computed: checked
    const checked = computed({
      get () {
        return props.item.checked
      },
      set (value) {
        props.checkItem(props.item, value)
      }
    })

    // 删除此项数据
    const del = () => {
      if (window.confirm('确定要删除吗？')) {
        props.delItem(props.index)
      }
    }

    return {
      handle,
      checked,
      del
    }
  }
}
</script>

<style scoped>
  li {
    list-style: none;
    background-color: #fff;
    padding: 10px 15px;
    width: calc(100% - 30px);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
  }
  li:first-child {
    border-top: 1px solid #f1f1f1;
  }
  .item {
    display: inline-flex;
    align-items: center;
  }
  .item input[type="checkbox"] {
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    cursor: pointer;
  }
  .item .middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
  }
  .item span.time {
    font-size: 12px;
    color: #bdbdbd;
    text-align: right;
  }
  .item span.title{
    display: inline;
    white-space: nowrap;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .item input[type="checkbox"]:checked ~ .middle .title {
    color: #6396ff;
  }

  button{
    height: 28px;
    padding: 0 10px;
    white-space: nowrap;
    display: none;
  }
  li:hover span{ color: #6396ff; }
  li:hover button{ display: block;  }
</style>
